<template>
  <el-drawer
    model-value="dialogVisible"
    :title="dialogTitle"
    width="60%"
    @close="handleClose"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="上级菜单" prop="parentId">
        <tree-select
          v-model:value="form.parentId"
          :options="tableData"
          :objMap="{
            value: 'id',
            label: 'name',
            children: 'children',
          }"
          placeholder="请选择系统菜单"
        />
        <!-- <el-select
          v-model="form.parentId"
          placeholder="请选择上级菜单"
          @change="$forceUpdate()"
          popper-class="menulist"
          filterable
        >
          <template v-for="item in tableData" :key="item.id">
            <el-option :label="item.name" :value="item.id"></el-option>
            <template v-for="child in item.children" :key="child.id">
              <el-option :label="child.name" :value="child.id">
                <span>{{ "    -- " + child.name }}</span>
                <template v-for="child2 in child.children" :key="child2.id">
                  <el-option :label="child2.name" :value="child2.id">
                    <span>{{ "      -- " + child2.name }}</span>
                  </el-option>
                </template>
              </el-option>
            </template>
          </template>
        </el-select> -->
      </el-form-item>

      <el-form-item label="菜单类型" prop="menuType" label-width="100px">
        <el-radio-group v-model="form.menuType">
          <el-radio :label="'M'">目录</el-radio>
          <el-radio :label="'C'">菜单</el-radio>
          <el-radio :label="'F'">按钮</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="菜单图标" prop="icon">
        <!-- <el-input v-model="form.icon" /> -->
        <select-icon v-model="form.icon" />
      </el-form-item>

      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>

      <el-form-item label="权限标识" prop="perms">
        <el-input v-model="form.perms" />
      </el-form-item>
      <el-form-item label="路由路径" prop="path">
        <el-input v-model="form.path" />
      </el-form-item>
      <el-form-item label="组件路径" prop="component">
        <el-input v-model="form.component" />
      </el-form-item>

      <el-form-item label="显示顺序" prop="orderNum">
        <el-input-number
          v-model="form.orderNum"
          :min="1"
          label="显示顺序"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="是否显示" prop="isShow">
        <el-switch v-model="form.isShow" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确认</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-drawer>
</template>
<script>
export default {
  name: "menuDialog",
};
</script>
<script setup>
import { defineEmits, defineProps, ref, watch, unref } from "vue";
import http, { getServerUrl } from "@/utils/request";
import { ElMessage } from "element-plus";
import SelectIcon from "@/components/icons/SelectIcon";
import { throttle } from "lodash";

const tableData = ref([]); //所有菜单数据

const props = defineProps({
  id: {
    type: Number,
    default: -1,
    required: true,
  },
  dialogTitle: {
    type: String,
    default: "",
    required: true,
  },
  dialogVisible: {
    type: Boolean,
    default: false,
    required: true,
  },
  tableData: {
    type: Array,
    default: [],
    required: true,
  },
});

// 这指的是当前菜单信息，即如果是新增的话根据id查出来的信息
const form = ref({
  id: -1,
  parentId: "",
  menuType: "M",
  icon: "",
  name: "",
  perms: "",
  component: "",
  path: "/",
  orderNum: 1,
  isShow: true,
});

const rules = ref({
  parentId: [{ required: true, message: "请选择上级菜单" }],
  name: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
});

const formRef = ref(null);

const initFormData = async (id) => {
  const res = await http.get(`sys/menu/${id}`);
  res.data.data.isShow = res.data.data.isShow ? true : false;
  form.value = res.data.data;
};

watch(
  () => props.dialogVisible,
  () => {
    let id = props.id;
    let date = new Date();
    let system = [
      {
        id: 0,
        name: "系统",
        parentId: -1,
        orderNum: 1,
        path: "/",
        component: "",
        menuType: "M",
        perms: "",
        createTime: date,
        updateTime: date,
        remark: "顶级目录",
        children: props.tableData,
      },
    ];
    tableData.value = system;
    if (id != -1) {
      initFormData(id);
    } else {
      form.value = {
        id: -1,
        parentId: "",
        menuType: "M",
        icon: "",
        name: "",
        perms: "",
        component: "",
        orderNum: 1,
        isShow: true,
        path: "/",
      };
    }
  }
);

const emits = defineEmits(["update:modelValue", "initMenuList"]);

const handleClose = () => {
  emits("update:modelValue", false);
};

const handleConfirm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      form.value.isShow = form.value.isShow ? 1 : 0;
      let result = await http.post("sys/menu/save", form.value);
      let data = result.data;
      if (data.code == 200) {
        ElMessage.success(data.msg);
        formRef.value.resetFields();
        emits("initMenuList");
        handleClose();
      } else {
        ElMessage.error("操作失败");
      }
    } else {
      console.log("fail");
    }
  });
};
</script>
<style lang="less">
.menulist {
  .el-select-dropdown__item {
    height: auto;
  }
}
</style>
<style scoped>
</style>
